
.play{
    display: flex;
    flex-direction: column;
    // .main{
    //     flex: 1;
    //     display: flex;
    //     height: 100%;
    //     align-items: center;
    //     justify-content: center;
    //     background-color: #000;
    //     position: relative;
    //     flex-direction: column;
    // }
    // #video{
    //     width: 100%;
    //     height: 300px;
    //     object-fit: cover;
    // }

    // .box{
    //     position: absolute;
    //     color: #fff;
    //     bottom: 60px;
    //     left: 20px;
    //     font-size: 40px;
    //     font-weight: bold;

    //     .name{
    //         font-size: 16px;
    //         margin: 10px 0;
    //     }
    // }

    
    // .progresss{
    //     width: 100%;
    //     height: 10px;
    //     bottom: 60px;
    //     position: fixed;
    //     background-color: orange;
    // }
    .main{
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #000;
        justify-content: center;
        position: relative;
        video{
            width: 100%;
            height: 200;
            object-fit: cover;
        }

        .box{
            color: #fff;
            position: absolute;
            bottom: 30px;
            left: 20px;
            font-size: 30px;
            font-weight: bold;

            .name{
             font-size: 16px;
             margin: 10px 0;
            }
        }
    }
    .control{
        display: flex;
        height: 60px;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .progress{
            width: 0%;
            height: 100%;
            background-color: darkorange;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        i{
            font-size: 40px;
        }
    }

    .mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top,#fbc2eb 0%,#a6c1ee 100%);
        display: none;
        .text{
            text-align: center;
            line-height: 60px;
            font-size: 18px;
            color: rgba(255, 255, 255, 1);
        }

        .controlbox{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 300px;
            div{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;
                width: 100px;
                height: 100px;
                background-color: hotpink;
                border-radius: 50%;

                &:first-child{
                    background-color: rgba(121, 240, 194, 1);
                }
                &:last-child{
                    background-color: rgba(255, 96, 96, 1);
                }
            }
        }

        .curbox{
            width: 300px;
            border: 1px solid red;
            display: flex;
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            img{
                width: 150px;
                height: 100px;
                object-fit: cover;
            }
        }
    }
}